<template>
  <div class="clearfix">
    <a-upload
      :customRequest="uploadimage"
      list-type="picture-card"
      :file-list="fileList"
      @preview="handlePreview"
      @change="handleChange"
      :remove="removeFile"
      :multiple="true"
      :beforeUpload="beforeUpload"
    >
      <div v-if="fileList.length < 3">
        <a-icon type="plus" />
        <div class="ant-upload-text">上传</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleC">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject(error)
  })
}
export default {
  name: '',
  components: {},
  data() {
    return {
      previewVisible: false,
      previewImage: '',
      flagshowmodel: false,
      fileList: [
        // {
        //   uid: '-1',
        //   name: 'image.png',
        //   status: 'done',
        //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        // },
        // {
        //   uid: '-2',
        //   name: 'image.png',
        //   status: 'done',
        //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        // },
        // {
        //   uid: '-3',
        //   name: 'image.png',
        //   status: 'done',
        //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        // }
      ]
    }
  },
  created() {
    this.getImage()
  },
  mounted() {},
  computed: {},
  methods: {
    beforeUpload(file, fileList) {
      // console.log('上传之前', fileList)

      if (this.fileList.length + fileList.length > 3) {
        this.$message.success('轮播图最多只能选3张')
        return false
      } else {
        return true
      }
    },
    getImage() {
      this.$http.post('/carouseimage/getimage').then((res) => {
        // console.log('res', res)
        this.fileList = res.result
      })
    },
    removeFile(e) {
      console.log('删除文件', e.name)
      this.$http.post('/carouseimage/del', e).then((res) => {
        console.log(res)
        if (!this.flagshowmodel) {
          this.$message.success(res.result)
        }
        this.flagshowmodel = true
        setTimeout(() => {
          this.flagshowmodel = false
        }, 1000)
        this.getImage()
        // if (res.code === 200) {
        //   this.$http.get(`/carouseimage/delete/${e.uid}`).then((res) => {
        //     // console.log(res)
        //     if (res.code === 200) {
        //       this.getImage()
        //     }
        //   })
        // }
      })
    },
    uploadimage(file, fileList) {
      console.log(file)
      const formData = new FormData()
      formData.append('file', file.file) // 'file' 是文件的表单字段名，file 是文件对象
      this.$http
        .post('/carouseimage/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data' // 确保请求头设置为 multipart/form-data
          }
        })
        .then((res) => {
          console.log('上传成功', res)
          this.$http.post('/carouseimage/insert', res.result[0]).then((res) => {
            console.log(res)
          })
          this.fileList.push(res.result[0])
        })
      console.log(this.fileList)
    },
    handleC() {
      this.previewVisible = false
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange({ fileList }) {
      // console.log('上传的图片', fileList)
      // this.fileList = fileList
    }
  }
}
</script>

<style scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
